<template>
      <div id="userNewsBox">
        <el-container>
            <el-header style="height:100px">
                <el-container  style="height:100px">
                    <el-aside width="350px">
                        <el-row style="margin-top:40px;margin-left:20px">
                            <!-- <el-col :span="6" class="imgCol">
                                <i class="iconfont iconxinzeng pointer" style="font-size:25px;margin-right:10px;color:#409EFF"></i>
                                <span class="pointer">新增</span>
                            </el-col> -->
                            <el-col :span="6" class="imgCol">
                                <i class="iconfont iconxuanze pointer" style="font-size:25px;margin-right:10px;color:#409EFF" @click="chooseAction"></i>
                                <span class="pointer" @click="chooseAction">选择</span>
                            </el-col>
                             <el-col :span="6" class="imgCol" v-show="actionReady">
                                <i class=" el-icon-delete pointer" style="font-size:25px;margin-right:10px;color:#fd034f"></i>
                                <span class="pointer">删除</span>
                            </el-col>
                             <el-col :span="6" class="imgCol" v-show="actionReady" >
                                <i class="el-icon-circle-close pointer" style="font-size:25px;margin-right:10px;color:#409EFF" @click="cancleAction"></i>
                                <span class="pointer" @click="cancleAction">取消</span>
                            </el-col>
                        </el-row>
                    </el-aside>
                    <el-main >
                        <el-row style="margin-top:40px;">
                 
                            <el-col :span="16" :offset="7">
                                <el-input>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-header>
            <el-main>
                    <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                            <el-table-column
                                type="selection"
                                >
                            </el-table-column>
                            <el-table-column
                                prop="contain"
                                label="内容"
                              >
                            </el-table-column>
                            <el-table-column
                                prop="user"
                                label="用户"
                                >
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="时间">
                                <template slot-scope="scope">
                                    <i class="el-icon-time"></i>
                                    <span style="margin-left: 10px">{{ scope.row.date}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                prop="action"
                                label="操作"
                            >
                               <template slot-scope="scope">
                                            <el-button
                                                @click.native.prevent="deleteRow(scope.$index, tableData)"
                                                type="primary"
                                                size="mini"
                                                icon="iconfont iconhulue"
                                                plain>
                                                忽略
                                            </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
            </el-main>
            <el-footer style="margin-top:10px">
                <el-pagination
                    background
                    layout="total,prev, pager, next"
                    :total="1000">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{
            actionReady:false,
            currentStatus:1,
            tableData:[
                {
                    id:1,
                    contain:'真不错',
                    user:'massami',
                    date:'2019-09-10 17:52'
                },
                {
                    id:2,
                    contain:'真不错',
                    user:'massami',
                    date:'2019-09-10 17:52'
                },
                {
                    id:2,
                    contain:'真不错',
                    user:'massami',
                    date:'2019-09-10 17:52'
                }
            ]
        }
    },
    mounted(){
        var body=document.getElementById('userNewsBox');
        var height=document.documentElement.clientHeight-120;
        body.style.height=height+'px';
        console.log(height);
    },
    methods:{
        chooseAction(){
            this.actionReady=true;
        },
        cancleAction(){
            this.actionReady=false;
        },
    }
}
</script>
<style>
#userNewsBox{
/* height:600px; */
background-color:#fff;
margin:15px;
border-radius:5px
}
.el-header,.el-main,.el-footer,.el-aside{
    padding: 0px;
}
.end{
    display: flex;
    justify-content: flex-end;
}
.pointer{
    cursor:pointer;
}
.imgCol{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>